<template>
  <div class="rightbox" v-cloak>
    <h1>广告主跟进列表</h1>
    <div style="width: 96%;margin:2% 2% 15px 2%;overflow:hidden;">
      <div :span="4" style="float:left;width:250px;">
        <el-select v-model="advertId" placeholder="广告主名称" clearable style="width:250px;">
          <el-option label="全部" value=" "></el-option>
          <el-option
            v-for="item in advertList"
            :key="item.advertindex"
            :label="item.name"
            :value="item.advertindex">
          </el-option>
        </el-select>
      </div>
      <div :span="4" style="float:left;width:250px;margin-left:10px;">
        <el-select v-model="customerindex" placeholder="电销客服" clearable style="width:250px;">
          <el-option label="全部" value=" "></el-option>
          <el-option
            v-for="item in customerData"
            :key="item.customerindex"
            :label="item.name"
            :value="item.customerindex">
          </el-option>
        </el-select>
      </div>
      <div :span="4" style="float:left;margin-left:10px;width:220px">
        <el-select v-model="state" placeholder="进度状态" clearable style="width:220px;">
          <el-option label="全部" value=" "></el-option>
          <el-option label="已撤回" value="已撤回"></el-option>
          <el-option label="已到店" value="已到店"></el-option>
          <el-option label="未到店" value="未到店"></el-option>
          <el-option label="已量房" value="已量房"></el-option>
          <el-option label="已签约" value="已签约"></el-option>
          <el-option label="已签约其他公司" value="已签约其他公司"></el-option>
          <el-option label="已交定金" value="已交定金"></el-option>
          <el-option label="放弃跟进" value="放弃跟进"></el-option>
        </el-select>
      </div>
    </div>
    <div style="width: 96%;margin:0 2% 0 2%;overflow:hidden;">
      <div style="float:left">
        <el-date-picker
          style="width:250px;"
          v-model="starttime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="入库开始时间">
        </el-date-picker>
      </div>
      <div :span="3" style="margin-left:10px;float:left">
        <el-date-picker
          style="width:250px;"
          v-model="endtime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="入库结束时间">
        </el-date-picker>
      </div>
      <div :span="4" style="float:left;margin-left:10px;width:240px;">
        <el-input style="" v-model="phone" placeholder="手机号(微信号)"></el-input>
      </div>
      <div :span="6" style="margin-left:10px;float:left">
        <el-button type="primary" @click="Search">查询</el-button>
        <el-button type="primary" @click="Export">导出</el-button>
      </div>
    </div>
    <el-row  style="width: 96%;margin:2% 2% 10px 2%;">
      <el-col>数据总条数：{{total}}</el-col>
    </el-row>
    <el-table
    :data="contentList"
    border
    style="width: 96%;margin:2%">
<!--       <el-table-column type="expand">
        <template slot-scope="props">
          <div style="margin-bottom:20px;">谈话内容：
            <span>{{props.row.talkinfo}}</span>
          </div>
        </template>
      </el-table-column> -->
      <el-table-column
        prop="advertname"
        label="广告主名称"
      >
      </el-table-column>
      <el-table-column
        prop="customername"
        label="电销客服"
      >
      </el-table-column>
      <el-table-column
        prop="subadvert"
        label="当前跟进人"
      >
      </el-table-column>
      <el-table-column
        prop="name"
        label="客户姓名">
        <template slot-scope="scope">
          <div v-if="scope.row.sex === 0">{{scope.row.name}}(先生)</div>
          <div v-if="scope.row.sex === 1">{{scope.row.name}}(小姐)</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="phone"
        label="手机号码(微信号)"
      >
      </el-table-column>
      <el-table-column
        prop="code"
        label="客户编码"
      >
      </el-table-column>
      <el-table-column
        prop="template"
        label="行业信息"
        width="300"
      >
      </el-table-column>
      <el-table-column
        prop="talkinfo"
        label="谈话内容"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="createtime"
        label="入库时间"
      >
      </el-table-column>
      <el-table-column
        prop="modifytime"
        label="最后跟单时间"
      >
      </el-table-column>
      <el-table-column
        prop="state"
        label="状态"
      >
        <template slot-scope="scope">
          <span style="color:#f00">{{scope.row.state}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120px">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="toproess(scope)">查看进度</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page" v-if="total >= 5">
      <el-pagination
        background
        layout="prev, pager, next"
        @current-change="handleCurrentChange"
        :page-size="pagelimit"
        :total="total">
      </el-pagination>
    </div>
    <el-dialog title="跟进状态" :visible.sync="TableVisible" width="70%">
      <el-table :data="proessData">
        <el-table-column property="name" label="账号" width="150"></el-table-column>
        <el-table-column property="createtime" label="跟进时间" width="200"></el-table-column>
        <el-table-column property="talkinfo" label="跟进内容"></el-table-column>
        <el-table-column property="state" label="状态" width="200">
          <template slot-scope="scope">
            <span style="color:#f00">{{scope.row.state}}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'
export default {
  data () {
    return {
      contentList: [],
      pagelimit: 5,
      pageindex: 0,
      total: '',
      talkinfo: '',
      name: '',
      starttime: '',
      endtime: '',
      TableVisible: false,
      proessData: [],
      phone: '',
      state: '',
      advertId: '',
      advertList: [],
      customerData: [],
      customerindex: ''
    }
  },
  methods: {
    Search: function () {
      var that = this
      that.getList()
    },
    getData: function () {
      var that = this
      that.$pub.open()
      axios.post('/gp/Dial/index')
        .then((res) => {
          that.$pub.close()
          if (res.data.code === 0) {
            that.advertList = res.data.data.advertList
            that.customerData = res.data.data.customerList
          } else {
            that.$pub.failcode(that, res.data.code, res.data.data)
          }
        })
        .catch(function () {
          that.$pub.catchbox(that)
        })
    },
    Export: function () {
      var that = this
      window.location.href = '/gp/SubDial/ExportExcel?starttime=' + that.starttime + '&endtime=' + that.endtime + '&talkinfo=' + that.talkinfo + '&customerindex=' + that.customerindex + '&advertindex=' + that.advertId + '&state=' + that.state + '&phone=' + that.phone
    },
    getList: function () {
      var that = this
      that.$pub.open()
      axios.post('/gp/SubDial/index', qs.stringify({
        talkinfo: that.talkinfo,
        advertindex: that.advertId,
        starttime: that.starttime,
        endtime: that.endtime,
        pagelimit: that.pagelimit,
        pageindex: that.pageindex,
        state: that.state,
        phone: that.phone,
        customerindex: that.customerindex
      })
      )
        .then((res) => {
          that.$pub.close()
          if (res.data.code === 0) {
            that.contentList = res.data.data.datalist
            // for (var i = 0; i < that.contentList.length; i++) {
            //   that.contentList[i].template = that.contentList[i].template.replace(/null/g, '无')
            // }
            that.total = res.data.data.total
          } else {
            that.$pub.failcode(that, res.data.code, res.data.data)
          }
        })
        .catch(function () {
          that.$pub.catchbox(that)
        })
    },
    toproess (scope) {
      var that = this
      axios.post('/gp/SubDial/Subinfo', qs.stringify({
        dialofadvertindex: scope.row.dialofadvertindex
      })
      )
        .then((res) => {
          that.$pub.close()
          if (res.data.code === 0) {
            that.proessData = res.data.data
            that.TableVisible = true
          } else {
            that.$pub.failcode(that, res.data.code, res.data.data)
          }
        })
        .catch(function () {
          that.$pub.catchbox(that)
        })
    },
    handleCurrentChange (val) {
      var that = this
      that.pageindex = val
      that.getList()
    },
    Modify: function (scope) {
      var that = this
      that.$router.push({
        name: 'dataModify',
        params: {
          dialindex: scope.row.dialindex
        }
      })
    }
  },
  mounted () {
    this.getData()
    const date = new Date()
    this.starttime = '2018-06-01'
    this.endtime = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate()
  }
}
</script>
